import * as Icon from "@ant-design/icons";
import React, { useState, FC, useEffect } from 'react';
import Head from './components/header'
import { Outlet, useNavigate, useLocation } from 'react-router-dom'
import { Layout, Menu, theme } from 'antd';
import { getUserMenuList } from '@/request/basicSettings'
import "./index.scss"
const { Header, Sider, Content } = Layout;
let keys: any = []
const Home: FC = () => {
  //菜单
  const [chooseRoute, setChooseRoute] = useState('')
  const [items, setItems] = useState([])
  const navigate = useNavigate()
  const [collapsed, setCollapsed] = useState(false);
  const {
    token: { colorBgContainer },
  } = theme.useToken();
  const [defaultOpenKeys, setDefaultOpenKeys]: any = useState([])
  const location = useLocation()
  useEffect(() => {
    getUserMenu()
  }, [])
  useEffect(() => {
    if (location.pathname !== '/home') {
      const reg = new RegExp('/home')
      setChooseRoute(location.pathname.replace(reg, '') || '/home')
    }
  }, [location])
  const filter = (data: any) => {
    for (let i = 0; i < data.length; i++) {
      if (data[i].icon) {
        data[i].icon = React.createElement(Icon && (Icon as any)[data[i].icon.trim()])
      }

      if (data[i].children && data[i].children.length > 0) {
        if (data[i].expand) {
          keys = [...keys, data[i].key]
        }
        filter(data[i].children)
      }
    }
  }

  //获取导航栏
  const getUserMenu = async () => {
    const res = await getUserMenuList('', JSON.parse(window.localStorage.getItem('userinfo') || "{auth:''}").auth)
    if (res.status !== 200) return
    keys = []
    filter(res.data)
    setDefaultOpenKeys(keys)
    setItems(res.data)
  }
  //点击导航栏
  const onClick = (value: any) => {
    const rout = `${value.key == '/home' ? '' : '/home'}` + value.key
    setChooseRoute(value.key)
    navigate(rout, {
      replace: true
    })
  }
  //折叠面板操作
  const handelCollapsed = () => {
    setCollapsed(!collapsed)
  }
  return (
    <Layout style={{ height: '100vh' }}>
      <Sider trigger={null} collapsible collapsed={collapsed}>
        <div className="demo-logo-vertical" />
        <Menu
          theme="dark"
          mode="inline"
          items={items}
          onClick={onClick}
          selectedKeys={[chooseRoute ? chooseRoute : '/home']}
          className="menu"
          openKeys={defaultOpenKeys}
          onOpenChange={(openKeys: string[]) => {
            setDefaultOpenKeys(openKeys);
          }}
        >
        </Menu>
      </Sider>
      <Layout>
        <Header style={{ padding: 0, background: colorBgContainer }}>

          <Head collapsed={collapsed} changeColl={handelCollapsed} items={items} />
        </Header>
        <Content
          style={{
            margin: '24px 16px',
            padding: 24,
            minHeight: 280,
            background: colorBgContainer,
            overflow: 'auto'
          }}
        >
          <Outlet />
        </Content>
      </Layout>
    </Layout>
  );
};

export default Home;